<template>
	<block v-if="isLogin">
		<view class="cart_box" v-if="buffer">
			<view class="cart_head">
				<view class="cart_menu">
					<text>全部(20)</text>
					<text>降价(4)</text>
					<text>常卖(2)</text>
					<text>分类</text>
				</view>
				<view class="cart_ticket">
					<!-- 此处使用checkbox是因为支付宝switch没有checkbox类型 -->
					<!-- <switch type="checkbox" :checked="true" color="#ff6040"  /> -->
					<checkbox color="#FF6040" value="true" />
					<text class="cart_ticket_text1">小U自营</text>
					<text class="cart_ticket_text2">以免运费 |</text>
					<text class="cart_ticket_text3">领券</text>
				</view>
			</view>

			<view class="container">
				<view class="top">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" v-for="(item,index) in cartList"
						:key="index">
						<view class="cartInfo" id="demo1">
							<!-- 明日来写购物车基本信息 -->
							<view class="cartInfochild">
								<!-- 选择框 -->
								<view class="cartInfo_switch common">
									<!-- 点击当前商品 -->
									<checkbox-group @change="check(index)">
										<checkbox color="#FF6040" :checked="item.status" value="1" />
									</checkbox-group>

									<!-- <switch type="checkbox" :checked="true"  color="#ff6040" /> -->
								</view>
								<!-- 图片 -->
								<view class="cartInfo_image common">
									<image :src="item.img" mode="widthFix"></image>
								</view>

								<!-- 信息 -->
								<view class="cartInfo_info">
									<label style="font-size: 32rpx;">{{item.goodsname}}</label>
									<label style="font-size: 24rpx; color: #ccc;">规格：不错的商品</label>
									<label style="font-size: 20rpx; color: #FF6040;">比加入降低￥100</label>
									<label style="color:#FF6040;">￥
										<text style="font-size: 40rpx;color:#FF6040;">200
										</text> <text>￥200</text>
									</label>
								</view>
								<!-- 加减数量 -->
								<view class="cartInfo_num">
									<view class="cartInfo_num_child">
										<label @click="desc(index)">－</label>
										<label>{{item.num}}</label>
										<label @click="asc(index)">＋</label>
									</view>
								</view>
							</view>

						</view>
						<view class="cartDel" id="demo2">
							<label for="" @click="del(index)">删除</label>
						</view>
					</scroll-view>
				</view>

				<!-- 底部 -->
				<view class="foot">
					<view class="footd1">
						<checkbox-group @change="changeAll">
							<checkbox color="#FF6040" value="1" :checked="allChecked" />
						</checkbox-group>
						<!-- <switch type="checkbox" :checked="true" color="#ff6040" /> -->
						<label>全选</label>
					</view>
					<view class="footd2">
						<view class="footd2sp1">合计：<label style="color: #FF6040;">￥ {{totalPrice}}</label></view>
						<label class="footd2sp2">不含运费，已优惠￥0.00</label>
					</view>
					<!-- 跳到提交订单，结算页面 -->
					<view class="footd3" hover-class="touchOpacity">
						<!-- 被选中的商品的个数 -->
						<label @click="goOrder">去结算({{totalNum}}件)</label>
					</view>
				</view>

			</view>
		</view>
		<!-- 无数据提示 -->
		<view v-else>
			<cartnull />
		</view>
	</block>
	<view class="" v-else>
		<button>去登陆</button>
	</view>
</template>

<script>
	// 引入数据为空提示组件
	import cartnull from '@/components/cartnull/cartnull.vue';
	import colorGradient from '../../uni_modules/uview-ui/libs/function/colorGradient';
	export default {
		components: {
			cartnull
		},
		data() {
			return {
				cartList: [{
						src: '../../static/img/pic/commodity/01.png',
						name: '美容管'
					},
					{
						src: '../../static/img/pic/commodity/01.png',
						name: '美容管'
					},
					{
						src: '../../static/img/pic/commodity/01.png',
						name: '美容管'
					},
					{
						src: '../../static/img/pic/commodity/01.png',
						name: '美容管'
					},
					{
						src: '../../static/img/pic/commodity/01.png',
						name: '美容管'
					},
					{
						src: '../../static/img/pic/commodity/01.png',
						name: '美容管'
					},
				], //初始化购物车数据
				buffer: false, //检测购物车是否有数据
				isLogin: false
			}
		},
		// 页面显示时
		async onShow() {
			this.isLogin = await this.$isLogin(this)
			this.getCatrList()
		},
		methods: {
			// 获取购物车列表
			async getCatrList() {
				let {
					token,
					uid
				} = uni.getStorageSync('userInfo')
				let options = {
					url: '/api/cartlist',
					data: {
						uid
					},
					header: {
						authorization: token
					}
				}
				let result = await this.$http(options)
				// console.log(result);
				if (result.data.code == 200) {
					this.buffer = true
					this.cartList = result.data.list
					console.log(this.cartList);
					this.cartList.map(item => {
						item.img = this.$baseUrl + item.img
						// console.log(item.img);
						item.status = item.status == 1 ? true : false
					})
				} else if (result.data.code == 403) {
					uni.showToast({
						title: '请重新登录',
						icon: 'error'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 2000)
					this.buffer = false
				} else {
					uni.showToast({
						title: '网络故障',
						icon: 'error'
					})
					this.buffer = false
				}
			},
			// 点击全选
			changeAll(e) {
				console.log(e);

				let tag = e.detail.value.length > 0 ? true : false
				console.log(tag);
				this.cartList.map(item => {
					console.log(item);
					item.status = tag
				})
			},
			// 单选
			check(index) {
				// console.log(this.cartList[index].status);
				this.cartList[index].status = !this.cartList[index].status
			},

			// 修改购物车数据
			async editCart(index, type) {
				let {
					token
				} = uni.getStorageSync('userInfo')
				let options = {
					url: '/api/cartedit',
					data: {
						id: this.cartList[index].id,
						type
					},
					header: {
						authorization: token
					},
					method: 'POST'
				}
				let result = await this.$http(options)
				console.log(result);
				if (result.data.code == 200) {

				} else if (res.data.code == 403) {
					uni.showToast({
						title: '请重新登录',
						icon: 'error'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages//login/login'
						})
					}, 2000)
				} else {
					uni.showToast({
						title: '网络故障',
						icon: 'error'
					})
				}
			},
			// 商品加一
			asc(index) {
				this.cartList[index].num++
				this.editCart(index, 2)
			},
			// 商品减一
			desc(index) {
				this.cartList[index].num--
				if (this.cartList[index].num < 1) {
					uni.showToast({
						title: '不能再少了',
						icon: 'error'
					})
					this.cartList[index].num = 1
				}
				this.editCart(index, 1)
			},
			// 删除购物车数据
			del(index) {
				uni.showModal({
					title: '提醒',
					content: '是否删除',
					success: async (res) => {
						console.log(res);
						if (res.confirm) {
							let {
								token
							} = uni.getStorageSync('userInfo')
							let option = {
								url: '/api/cartdelete',
								data: {
									id: this.cartList[index].id
								},
								header: {
									authorization: token
								},
								method: 'POST'
							}
							let result = await this.$http(option)
							if (result.data.code == 200) {
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
							} else if (res.data.code == 403) {
								uni.showToast({
									title: '请重新登录',
									icon: 'error'
								})
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages//login/login'
									})
								}, 2000)
							} else {
								uni.showToast({
									title: '网络故障',
									icon: 'error'
								})
							}
						}
					}

				})
			},
			// 去结算页面
			goOrder() {
				let carts = this.cartList.filter(item => {
					return item.status == true
				})
				if (carts.length > 0) { //判断是否有选中的商品
					uni.setStorageSync('carts', {
						carts: carts,
						totalPrice: this.totalPrice,
						countnumber: this.totalNum
					})
					uni.navigateTo({
						url: '/pages/order/order'
					})
				} else {
					uni.showToast({
						title: '至少有一件',
						icon: 'none'
					})
				}
			}
		},
		computed: {
			// 全选状态
			allChecked() {
				let isChecked = this.cartList.every(item => {
					return item.status == true
				})
				return isChecked
			},
			// 总价
			totalPrice() {
				let total = 0;
				this.cartList.filter(item => {
					if (item.status) {
						total += item.price * item.num
					}
				})
				return total
			},
			// 总数
			totalNum() {
				let total = 0
				this.cartList.filter(item => {
					if (item.status) {
						total += item.num
					}
				})
				return total
			}
		}
	}
</script>

<style scoped>
	/* 引入样式文件 */
	@import url("@/static/css/cart.css");
</style>